<template>
  <uni-nav-bar title="我的收藏" left-icon="arrowleft" @clickLeft="back()"/>
  <!-- 收藏页面 -->
  <view class="background">
    <view class="collection">
      <view style="height: 20px"></view>
      <view class="content">
        <view v-for="(item,index) in collect" :key="index" class="collect-for">
          <!-- div中放置获取的收藏信息 -->
          <view class="collect" @click="toCollection(item.productId)">
            <div class="collect-left">
              <image :src="item.productAvatar" mode="" class="collect-image"></image>
            </div>

            <div class="collect-right">
              <text class="text1">{{ item.productName }}</text>
              <text class="text2">所属分类:{{ item.productSort }}</text>
              <text class="text3"><span style="color: black">价格:</span>{{ item.productPrice }}</text>
            </div>

          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //存放数据
      collect: [],
    }
  },
  created() {
    this.getCollection()
  },
  methods: {
    back() {
      // console.log("点击了返回方法")
      uni.navigateBack({
        delta: 1
      });
    },
    getCollection() {
      // console.log("获取收藏接口")
      uni.request({
        url: "http://localhost:9999/nbb/Collection/getAll",
        header: {
          'Authorization': uni.getStorageSync('Authorization'),
          'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'GET',
        data: {
          userId: uni.getStorageSync('userId'),
        },
        success: (res) => {
          if (res.data.code == 200) {
            // console.log(res.data.data)
            this.collect = res.data.data
          } else {
            console.log("调用获取收藏失败");
            console.log(res.data);
          }
        },
        fail() {
          console.log("获取收藏失败");
        }
      })
    },
    toCollection(id) {
      console.log("点击成功")
      uni.navigateTo({
        url: '/pages/product/productDetail?id=' + id
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .uni-nav-bar-text {
  font-size: 20px;
}

::v-deep .uni-navbar__content_view {
  font-size: 20px;
}

.background {
  background: #F3F3F3;
}

.collect {
  padding-top: 20px;
  padding-bottom: 20px;
  //margin-top: 25px;
  display: flex;
  border-radius: 30px;
  justify-content: space-between;
  margin-bottom: 20px;
  background: white;
  padding-right: 55px;

  .collect-image {
    width: 140px;
    height: 120px;
    margin-left: 25px;
    border-radius: 20px;
  }

  .collect-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .text1 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 550;
  }

  .text2 {
    font-weight: 550;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .text3 {
    font-size: 14px;
    color: black;
    font-weight: bold;
    margin-top: 10px;
  }
}
</style>